<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            .box{
                  width:100px;
                  height: 100px;
                  background: yellowgreen;
                  margin: 10px;
                  margin-left: 200px;
            }
            #jingubang{
                  height: 3000px;
            }
      </style>
</head>
<body>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div id="jingubang"></div>
      <script>
            document.onmousemove = function(evt){
                  var e = evt || event;
                  // 鼠标的位置;
                  // client : 浏览器的可视区域边缘; 
                  // offset : 距离鼠标最近的元素;
                  // screen : 屏幕边缘;
                  // page   : client + scrollTop | scrollLeft  

                  // console.log(e.clientX , e.clientY , "可视区域");
                  // console.log(e.offsetX , e.offsetY );
                  // console.log(e.clientY , e.pageY , document.documentElement.scrollTop);
            }
         
      </script>
</body>
</html>